import React, { Component } from 'react'

export default class Footer extends Component {
  deleteCheckedItem = ()=>{
    this.props.deleteMulti()
  }
  render() {
    const { todos,checkAll } = this.props
    const total = todos.length
    const doneCount = todos.reduce((pre,item)=>pre + (item.done?1:0), 0)
    return (
      <div><input type='checkbox' onChange={()=>{checkAll()}} checked={total===doneCount?true:false} ></input><span>已完成{doneCount}/全部{total}</span><button onClick={this.deleteCheckedItem}>清除已完成</button></div>
    )
  }
}
